<template>
  <div class="gdxx_box">
    <div class="gdxx_title">股东(合伙人)信息</div>
    <div class="table_gdxx">
      <el-table :data="tableData" stripe fit>
        <el-table-column prop="name" label="股东名称"> </el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">机构股东</span>
            <span v-if="scope.row.type == 2">个人股东</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="证件号码" fit width="200px">
        </el-table-column>
        <el-table-column prop="posttype" label="职务"> </el-table-column>
        <el-table-column
          prop="contribution"
          label="出资额（单位：万）"
        ></el-table-column>
        <el-table-column prop="share_proportion" label="出资比例">
          <template slot-scope="scope">
            <span
              >{{
                Number((scope.row.share_proportion * 100).toFixed(2))
              }}%</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="140"
          v-if="
            infostate == 0 || infostate == 2 || infostate == 5 || infostate == 3
          "
        >
          <template slot-scope="scope">
            <el-button
              style="margin-right: 13px"
              @click="open(2, scope.row)"
              type="text"
              >编辑</el-button
            >
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="button_box_jb">
      <div
        class="zc"
        @click="open(1)"
        v-if="
          infostate == 0 || infostate == 2 || infostate == 5 || infostate == 3
        "
      >
        添加
      </div>
      <div class="xyb" @click="next('/hyjbxx')">上一步</div>
      <div class="xyb" @click="next('/hyryxx')">下一步</div>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="580px"
      :close-on-click-modal="false"
      @close="close()"
    >
      <div class="tc_gd_box">
        <div>
          <el-input placeholder="请输入股东名称" v-model="form.name">
            <template slot="prepend">股东名称</template>
          </el-input>
        </div>
        <div style="display: flex">
          <div class="tc_gd_box_prepend_box">类型</div>
          <el-select placeholder="请输入股东类型" v-model="form.type">
            <el-option label="机构股东" :value="1"></el-option>
            <el-option label="个人股东" :value="2"></el-option>
          </el-select>
        </div>
        <div>
          <el-input placeholder="请输入股东证件号码" v-model="form.code">
            <template slot="prepend">证件号码</template>
          </el-input>
        </div>
        <div>
          <el-input placeholder="请输入股东职务" v-model="form.posttype">
            <template slot="prepend">职务</template>
          </el-input>
        </div>
        <div>
          <el-input
            placeholder="请输入股东出资额"
            type="number"
            v-model="form.contribution"
          >
            <template slot="prepend">出资额</template>
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="additem(type)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
    
    <script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      tableData: [],
      title: "", //弹窗标题
      dialogVisible: false, //弹窗
      type: "", //判断当前是添加还是编辑，1、为添加，2、为编辑
      form: {},
      infostate: 0, //信息状态
    };
  },
  mounted() {
    this.infostate = this.$route.query.infostate;

    // console.log(this.infostate)
    this.getinfo();
    this.getinfostate();
  },
  methods: {
    ...mapMutations(["sethymenulist"]),
    /**
     * 获取信息状态
     */
    getinfostate() {
      let that = this;
      let data = {};
      that.$http.post("mechanism/check_publicity", data).then((res) => {
        if (res.code == 1) {
          that.infostate = res.data.status;

          if (
            this.infostate == 0 ||
            this.infostate == 2 ||
            this.infostate == 5 ||
            this.infostate == 3
          ) {
          } else {
            this.sethymenulist(false);
          }
        }
      });
    },
    /**
     * 获取机构股东（合伙人）信息
     */
    getinfo() {
      let that = this;
      let data = {
        type: "holder",
      };
      that.$http.post("mechanism/list", data).then((res) => {
        if (res.code === 1) {
          that.tableData = res.data.holder;
        } else {
          that.tableData = [];
        }
      });
    },
    /**
     *打开弹窗
     * @param {弹窗类型} i
     * @param {传递的信息内容} e
     */
    open(i, e) {
      let that = this;
      that.dialogVisible = true;
      that.type = i;
      if (i == 2) {
        that.title = "编辑股东（合伙人）";
        that.form = JSON.parse(JSON.stringify(e));
      } else if (i == 1) {
        that.title = "添加股东（合伙人）";
      }
    },
    /**
     * 弹窗关闭
     */
    close() {
      let that = this;
      // console.log(that.form)
      that.form = {};
      that.type = "";
    },
    /**
     * 股东（合伙人）操作
     * @param {操作类型,默认是1为添加} e
     */
    additem(e) {
      let that = this;
      let data = that.form;
      let url = "mechanism/holder_add_remain";
      if (e == 2) {
        url = "mechanism/holder_edit_remain";
      }
      that.$http.post(url, data).then((res) => {
        that.$self.ts(res).then(() => {
          this.getinfo();
          that.dialogVisible = false;
        });
      });
    },
    /**
     * 删除股东
     * @param {要删除的用户id} id
     */
    del(e) {
      let that = this;

      let data = {
        id: e.id,
      };
      let ts = {
        code: 1,
        msg: `您确定要将${e.name}从您机构删除吗？`,
      };
      that.$self.ts(ts, 2).then((item) => {
        that.$http.post("mechanism/holder_del", data).then((res) => {
          that.$self.ts(res).then(() => {
            this.getinfo();
          });
        });
      });
    },
    /**
     * 页面跳转
     * @param {跳转的页面路由} path
     */
    next(path) {
      this.$router.push({ path: path, query: { infostate: this.infostate } });
    },
  },
};
</script>
    <style>
.gdxx_box {
  margin-left: 0.645rem;
}
.tc_gd_box_prepend_box {
  border: none;
  border-right: 1px solid #ecebeb;
  background: rgba(242, 242, 242, 1);
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 137px;
  font-size: 0.2rem !important;
  color: #333 !important;
}
.tc_gd_box  .el-select{
  width: 100% ;
}
.gdxx_title {
  height: 40px;
  background: #1954a4;
  padding-left: 0.3375rem;
  display: flex;
  align-items: center;
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;
}
.table_gdxx {
  border: 1px solid #f2f2f2;
  border-bottom: none;
}
.table_gdxx .el-table__header thead th {
  background: #ebf2fc;
  text-align: center;
  color: #1954a4;
  height: 0.625rem !important;
}
.table_gdxx .el-table__body-wrapper tbody td {
  text-align: center;
  height: 0.625rem !important;
}
.tc_gd_box {
  border: 1px solid #f2f2f2;
}
.tc_gd_box div:nth-child(2n) .el-input__inner {
  background: rgba(242, 242, 242, 1);
}
.tc_gd_box .el-input__inner {
  border: none;
  border-radius: 0;
}
.tc_gd_box .el-input-group__append,
.tc_gd_box .el-input-group__prepend {
  border: none;
  border-right: 1px solid #ecebeb;
  background: #ffffff;
  border-radius: 0;
  text-align: center;
  width: 70px;
}
.tc_gd_box div:nth-child(2n) .el-input-group__prepend {
  background: rgba(242, 242, 242, 1);
}
.tc_gd_box input[type="number"]::-webkit-inner-spin-button,
.tc_gd_box input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tc_gd_box input[type="number"] {
  -moz-appearance: textfield; /* 兼容 Firefox */
}
/**
 * 解决el-input设置类型为number时，中文输入法光标上移问题
 **/
.tc_gd_box .el-input__inner {
  line-height: 1px !important;
}
/* // 同时解决 因为设置了如上的内容后 会导致select选择的时候会闪烁的问题 */
.tc_gd_box .el-select--medium .el-input__inner {
  line-height: 36px !important;
}
/**
 * 解决el-input设置类型为number时，去掉输入框后面上下箭头
 **/
.tc_gd_box input::-webkit-outer-spin-button,
.tc_gd_box input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
</style>
<style scoped>
.button_box_jb {
  display: flex;
  margin-top: 0.2625rem;
  margin-left: 0.275rem;
  padding-bottom: 0.5rem;
}
.button_box_jb div {
  margin-right: 0.3125rem;
}
.button_box_jb .zc,
.xyb,
.hs {
  width: 1.25rem;
  height: 0.5rem;
  background: #1954a4;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.hs {
  background: #7c7c7c;
}
.hs:hover {
  background: #9c9a9a;
}
.button_box_jb .zc:hover {
  background: #1f5fb8;
}
.button_box_jb .xyb {
  background: #fca204;
}
.button_box_jb .xyb:hover {
  background: #e9a125;
}
::v-deep .el-table tr {
  font-size: 0.2rem;
}
</style>